import React, {Component, useEffect, useLayoutEffect} from 'react';


class App extends Component {
    state = {
        isShow:true
    }

    render() {
        return (
            <div>
                <button onClick={()=>{
                    this.setState({
                        isShow:!this.state.isShow
                    })
                }}>click</button>
                {
                    this.state.isShow&&<Child/>
                }

            </div>
        );
    }
}
/*
useEffect和useLayoutEffect区别
简单来说就是调用时机不同，useLayoutEffect和原来componentDidMount&componentDidupdate一致，在
react完成DoM更新后马上同步调用的代码，会阻塞页面渲染。而useEffect是会在整个页面渲染完才会调用的
代码。
官方建议优先使用useEffect

在实际使用时如果想避免页面抖动（在useEffect里修改DOM很有可能出现）的话，可以把需要操作DOM的代
码放在useLayoutEffect里。在这里做点dom操作，这些dom修改会和react做出的更改一起被一次性渲染到
屏幕上，只有一次回流、重绘的代价。
*/
function Child() {
    //useEffect可以使用多次
    useEffect(()=>{
        window.onresize=()=>{
            console.log('onresize')
        }

       var time = setInterval(()=>{
            console.log('1111')
        },1000)

        return()=>{
            console.log('销毁')
            window.onresize=null
            clearInterval(time)
        }

    },[])

    //useLayoutEffect更像componentDidMount
    useLayoutEffect(()=>{

    },[])

    return (
        <div>
            Child
        </div>
    )
}

/*class Child extends Component{
    render() {
        return (
            <div>
                Child
            </div>
        )
    }
    componentDidMount() {
        window.onresize=()=>{
            console.log('onresize')
        }
    }


    //销毁
    componentWillUnmount () {
        console.log('componentWillUnmount')
        window.onresize=null
    }
}*/

export default App;
